<template>
	<view>
		<u-popup :show="show" mode="bottom" @close="closeEvent" :customStyle="{ bottom: bottomHeight }">
			<view class="nick_name_viwe">
				<view class="title_view">
					<label style="margin-left: 30rpx;color: #333333;line-height: 44rpx;font-size: 32rpx;font-weight: 500;">身高</label>
					<image @click="closeEvent" style="margin-left: auto;margin-right: 30rpx;width: 40rpx;height: 40rpx;" src="https://smosun-minapp.oss-cn-shanghai.aliyuncs.com/weapp/img/mall/inter-close.png"></image>
				</view>
				<view class="input_view">
					<input
						cursor-spacing="75"
						:adjust-position="flasFlag"
						@focus="getheightCont"
						@blur="initheight"
						@input="heightChange"
						maxlength="3"
						type="number"
						v-model="height"
						placeholder="请输入身高"
					/>
				</view>
				<view @click="confirmEvent" class="confirm_btn">确定</view>
			</view>
		</u-popup>
	</view>
</template>

<script>
export default {
	name: 'change-height-view',
	data() {
		return {
			height: '',
			flasFlag: false, //表示input输入时，页面不会往上推动
			bottomHeight: '0rpx', //input框的数据
			keywordHeight: '0rpx'
		};
	},
	props: {
		show: {
			type: Boolean,
			default: false
		},
		defaultHeight: {
			type: String,
			default: ''
		}
	},
	watch: {
		defaultHeight: {
			handler(newval) {
				this.height = newval;
			},
			deep: true
		}
	},
	methods: {
		closeEvent() {
			this.$emit('close');
		},
		returnEvent() {},
		confirmEvent() {
			this.$emit('confirm', this.height);
		},
		heightChange(e) {
			var height = e.detail.value;
			this.$nextTick(() => {
				if (height == 0) {
					this.height = '';
				} else {
					this.height = height;
				}
			});
		},
		getheightCont(e) {
			// input 展示的位置
			this.bottomHeight = e.detail.height + 'px';
			this.keywordHeight = e.detail.height + 'px';
		},
		initheight() {
			this.bottomHeight = '0rpx';
		}
	}
};
</script>

<style scoped>
.nick_name_view {
	width: 100%;
	height: 356rpx;
	background: #ffffff;
	box-shadow: 0rpx -2rpx 0rpx 0rpx rgba(38, 43, 49, 0.06);
	border-radius: 40rpx 40rpx 0rpx 0rpx;
	display: flex;
	flex-direction: column;
}
.title_view {
	display: flex;
	flex-direction: row;
	align-items: center;
	width: 100%;
	height: 104rpx;
}
.input_view {
	margin-top: 30rpx;
	width: 100%;
}
.input_view input {
	width: calc(100% - 60rpx);
	margin: 0 30rpx;
	font-size: 28rpx;
	height: auto;
	min-height: auto;
	padding: 16rpx 0;
	border-bottom: 2rpx solid #e6e6e6;
}
.confirm_btn {
	margin-top: 40rpx;
	margin-left: 30rpx;
	width: calc(100% - 60rpx);
	height: 96rpx;
	color: #ffffff;
	line-height: 96rpx;
	text-align: center;
	font-size: 30rpx;
	background: linear-gradient(180deg, #46c09e 0%, #156d4f 100%);
	box-shadow: 0rpx 24rpx 48rpx 0rpx rgba(55, 168, 148, 0.2);
	border-radius: 24rpx;
}
</style>
